<%@page import="java.awt.event.ItemEvent"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chatriq - Chat & Taskmanager</title>
    <meta name="description" content="The ultimate Bootstrap based Messaging framework to help build Messaging or Chat application fast and easy. Fully responsive and crafted with modern elements and latest design">
    <meta name="keywords" content="Chatriq, chat, messaging, theme, platform"/>
    <meta name="subject" content="">
    <meta name="copyright" content="">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon" />
	
	<script src="resource/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href=""/>
    <link rel="stylesheet" type="text/css" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" type="text/css" href="dist/css/app.min.css">    
    <link rel="stylesheet" type="text/css" href="dist/css/theme/default-theme.min.css">
</head>
<body class="default-theme" >
    <!-- Preloader Start -->
    <div class="preloader"></div>
    <!-- Preloader end -->
    <!-- main wrapper start -->
    <div class="main-wrapper">
        <div class="chatapp">
            <!-- navbar start -->
            <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top bg-white border-bottom shadow-sm">
                <a class="navbar-brand" href="#">
                    <img src="assets/images/logo.svg" width="50" height="50" class="d-inline-block align-top" alt="">
                    <h1>我的聊天</h1>
                </a>

                <div class="ml-auto d-flex align-items-center">
                    <div class="iconbox iconbox-search btn-hovered-light">
                        <i class="iconbox__icon mdi mdi-magnify"></i>
                    </div>
                    <div class="navbar-nav">
                        <div class="iconbox-group">
                        </div>
                        <div class="dropdown user-nav">
                            <div class="user-avatar user-avatar-sm user-avatar-rounded" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="chatriq-user chatriq-user-01"></div>
                            </div>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="javascript:;">
                                    <span><i class="mdi mdi-account-outline"></i></span>
                                    <span>Profile</span>
                                </a>

                                <a class="dropdown-item" href="javascript:;">
                                    <span><i class="mdi mdi-settings-outline"></i></span>
                                    <span>Settings</span>
                                </a>

                                <a class="dropdown-item" href="javascript:;">
                                    <span><i class="mdi mdi-help-circle-outline"></i></span>
                                    <span>Help</span>
                                </a>
                                <a class="dropdown-item" href="javascript:;">
                                    <span><i class="mdi mdi-comment-quote-outline"></i></span>
                                    <span>Feedback</span>
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:;">
                                    <span><i class="mdi mdi-logout-variant"></i></span>
                                    <span>Logout</span>
                                </a>
                            </div>
                        </div>
                        <div class="iconbox-searchbar">
                            <form>
                                <input type="text" class="form-control" placeholder="Search here..." autofocus>

                                <button class="search-submit" type="submit">
                                    <i class="mdi mdi-magnify"></i>
                                </button>
                                <a href="javascript:void(0)" class="search-close">
                                    <i class="mdi mdi-arrow-left"></i>
                                </a>
                            </form>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- navbar end -->

            <!-- sidebar start -->
            <!-- sidebar end -->

            <!-- main content start --><!-- 会话列表 -->
            <div class="chatapp__content">
                <div class="chatapp__messagetab">
                    <!-- user list start -->
                    <div class="chatapp-user-list">
                        <div class="chatapp-user-list-body custom-scrollbar">
                            <div class="chatapp__headingbar">
                                <h6>All Messages</h6>
                                <div class="chatapp__actions">
                                </div>
                            </div>
                            <ul class="list-unstyled">
                           <c:forEach var="item" items="${chats}">
                                <li class="active" onclick="getchats(${item.shop_id},${item.user_id})">
                                    <div class="conversation ">
                                        <div class="user-avatar user-avatar-rounded online">
                                            <div class="chatriq-user"><img src=${item.image }></div>
                                        </div>
                                        <div class="conversation__details">
                                            <div class="conversation__name">
                                                <div class="conversation__name--title">${item.u_name}</div>
                                                <div class="conversation__time">07:15 PM</div>
                                            </div>
                                            <div class="conversation__message">
                                                <div class="conversation__message-preview"><!--第一句聊天显示!-->
                                                    ${item.first_content}
                                                </div>
                                                <span><i class="mdi mdi-pin"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
</c:forEach>
                            </ul>
                        </div>
                        <!--拓展功能!-->
                        <ul id="mfbMenu" class="mfb-component--br mfb-slidein-spring" data-mfb-toggle="click">
                            <li class="mfb-component__wrap">
                                <a href="#" class="mfb-component__button--main">
                                    <i class="mfb-component__main-icon--resting mdi mdi-plus ion-plus-round"></i>
                                    <i class="mfb-component__main-icon--active mdi mdi-close ion-close-round"></i>
                                </a>
                                <ul class="mfb-component__list">
                                    <li>
                                        <a href="javascript:;"
                                            data-mfb-label="Theme" class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-palette"></i>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="javascript:;"  data-mfb-label="Create Group" class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-account-group"></i>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="javascript:;"  data-mfb-label="New Call" class="mfb-component__button--child">
                                            <i class="mfb-component__child-icon mdi mdi-phone"></i>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="javascript:;"  data-mfb-label="New Chat" class="mfb-component__button--child">
                                            <i class="mfb-component__child-icon mdi mdi-android-messages"></i>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- user list end -->

                    <!-- conversations start 聊天主界面-->
                    <div class="chatapp__conversations">
                        <!-- conversation wrapper start -->
                        <div class="conversation-wrapper">
                            <div class="conversation-panel">
                                <div class="conversation-panel__head">
                                    <div class="back-button-md">
                                        <i class="mdi mdi-arrow-left"></i>
                                    </div>
                                    <div class="conversation-panel__avatar info-panel-opener">
                                        <div class="user-avatar user-avatar-rounded">
                                            <div class="chatriq-user"><img src="assets/images/logo.svg"></div>
                                        </div>
                                        <div class="conversation__name">
                                            <div class="conversation__name--title"></div>
                                            <div class="conversation__time">享受美好生活</div>
                                        </div>
                                    </div>
                                    <div class="conversation__actions">
                                        
                                        <div class="dropdown">
                                            <div class="action-icon" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <i class="mdi mdi-dots-vertical"></i>
                                            </div>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a class="dropdown-item info-panel-opener" href="javascript:;">
                                                    <span><i class="mdi mdi-information-outline"></i></span> 
                                                    <span>View Contact</span>
                                                </a>

                                                <a class="dropdown-item" href="javascript:;">
                                                    <span><i class="mdi mdi-trash-can-outline"></i></span> 
                                                    <span>Delete Chat</span>
                                                </a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="javascript:;">
                                                    <span><i class="mdi mdi-cancel"></i></span> 
                                                    <span>Block</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="conversation-panel__body" >
                                    <div class="custom-scrollbar2">
                                        <div class="container">
                                            <ul class="chat-style-2" id="chat-lists"><!-- 聊天主界面 -->
                                            
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="conversation-panel__footer">
                                    <div class="composer">
                                        <div class="composer__left">
                                            <div class="composer__left--sticker">
                                                <i class="mdi mdi-sticker-emoji"></i>
                                            </div>
                                            <div class="composer__left--emoticon">
                                                <i class="mdi mdi-emoticon-outline"></i>
                                            </div>     
                                        </div>
                                        
                                        <div class="composer__middle"><!-- 输入文本框 -->
                                            <textarea id="textchat" class="form-control" rows="1" placeholder="Type a message..."></textarea>

                                        </div>

                                        <div class="composer__right">
                                            <div class="composer__right--send">
                                                <i id="send" class="mdi mdi-send">
                                                </i>
                                            </div>
                                            <div class="composer__right--microphone">
                                                <i class="mdi mdi-microphone"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- conversation panel end -->

                


                        <!-- information panel start -->
                        <div class="information-panel">
                            <div class="information-panel__head">
                                <h5>Contact info</h5>
                                <div class="information-panel__closer">
                                    <i class="mdi mdi-close"></i>
                                </div>
                            </div>

                            <div class="information-panel__body custom-scrollbar">
                                    
                                <div class="userprofile-avatar">
                                    <img src="assets/images/user/150/01.jpg" alt="">
                                </div>

                                <div class="userprofile-name">
                                    <h4>Jack P. Angulo</h4>
                                    <span>Product Manager</span>
                                    <div class="social-icon-box">
                                        <div class="social-icon">
                                            <i class="mdi mdi-facebook"></i>
                                        </div>
                                        <div class="social-icon">
                                            <i class="mdi mdi-linkedin"></i>
                                        </div>
                                        <div class="social-icon">
                                            <i class="mdi mdi-twitter"></i>
                                        </div>
                                        <div class="social-icon">
                                            <i class="mdi mdi-youtube"></i>
                                        </div>
                                    </div>
                                </div>

                                <hr>

                                <table class="table table-sm table-borderless user-table-info">
                                    <tr>
                                        <td><i class="mdi mdi-cellphone-android"></i></td>
                                        <td>+91 99041-99041</td>
                                    </tr>
                                    <tr>
                                        <td><i class="mdi mdi-web"></i></td>
                                        <td>www.jackangulo.com</td>
                                    </tr>
                                    <tr>
                                        <td><i class="mdi mdi-map-marker"></i></td>
                                        <td>2519  Burnside Court, HORICON, WI, 53032</td>
                                    </tr>
                                </table>

                                <hr>

                                <div class="accordion accordion-ungrouped mb-3" id="accordionExample">
                                    <div class="card">
                                        <div class="card-header" id="headingOne">
                                            <div class="card-title" data-toggle="collapse" role="button"  data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                <div class="acpanel__heading">
                                                    <div class="acpanel__left">
                                                        <span><i class="mdi mdi-camera-outline"></i></span>
                                                        <span>Photos & Media</span>
                                                    </div>
                                                    <div class="acpanel__right">
                                                        <span class="badge badge-info">26</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                
                                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                                            <div class="card-body">
                                                <div class="slick-slider">
                                                    <div><img class="img-fluid" src="assets/images/media/01.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/02.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/03.png" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/04.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/05.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/06.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/07.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/04.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/02.jpg" alt=""></div>
                                                    <div><img class="img-fluid" src="assets/images/media/04.jpg" alt=""></div>
                                                </div>                                                                                                        
                                            </div>
                                        </div>
                                    </div>
            
                                    <div class="card">
                                        <div class="card-header" id="headingTwo">
                                            <div class="card-title collapsed d-flex justify-content-between align-items-center"  role="button" data-toggle="collapse" data-target="#collapseTwo"
                                                aria-expanded="false" aria-controls="collapseTwo">
                                                <div class="acpanel__heading">
                                                    <div class="acpanel__left">
                                                        <span><i class="mdi mdi-file-document-outline"></i></span>
                                                        <span>Documents</span>
                                                    </div>
                                                    <div class="acpanel__right">
                                                        <span class="badge badge-info">16</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                            <div class="card-body">
                                                <ul class="list-unstyled documentlist-wrapper">
                                                    <li>
                                                        <div class="doclist">
                                                            <div class="docicon iconbox btn-solid-danger">
                                                                <i class="iconbox__icon mdi mdi-file-pdf-box"></i>
                                                            </div>
                                                            <div class="doctitle">
                                                                <div class="docname">example-file.pdf</div>
                                                                <div class="docsize">217kb</div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="doclist">
                                                            <div class="docicon iconbox btn-solid-info">
                                                                <i class="iconbox__icon mdi mdi-file-word-box"></i>
                                                            </div>
                                                            <div class="doctitle">
                                                                <div class="docname">example-file.docs</div>
                                                                <div class="docsize">217kb</div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="doclist">
                                                            <div class="docicon iconbox btn-solid-success">
                                                                <i class="iconbox__icon mdi mdi-file-excel-box"></i>
                                                            </div>
                                                            <div class="doctitle">
                                                                <div class="docname">example-file.xlxs</div>
                                                                <div class="docsize">217kb</div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="doclist">
                                                            <div class="docicon iconbox btn-solid-warning">
                                                                <i class="iconbox__icon mdi mdi-file-powerpoint-box"></i>
                                                            </div>
                                                            <div class="doctitle">
                                                                <div class="docname">example-file.pptx</div>
                                                                <div class="docsize">217kb</div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="doclistall">View All</div>
                                                    </li>
                                                    
                                                </ul> 
                                            </div>
                                        </div>
                                    </div>
            
                                    <div class="card">
                                        <div class="card-header" id="headingFour">
                                            <div class="card-title collapsed  d-flex justify-content-between align-items-center" role="button"  data-toggle="collapse" data-target="#collapseFour"
                                                aria-expanded="false" aria-controls="collapseFour">
                                                <div class="acpanel__heading">
                                                    <div class="acpanel__left">
                                                        <span><i class="mdi mdi-settings-outline"></i></span>
                                                        <span>Settings</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                                            <div class="card-body">
            
                                                <ul class="list-unstyled">
                                                    <li>
                                                        <div class="setting-list">
                                                            <div class="setting-list-name">Media Auto Download</div>
                                                            <div class="setting-list-switch">
                                                                <div class="custom-control custom-switch">
                                                                    <input type="checkbox" class="custom-control-input" id="customSwitch1">
                                                                    <label class="custom-control-label" for="customSwitch1"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="setting-list">
                                                            <div class="setting-list-name">Mute Conversation</div>
                                                            <div class="setting-list-switch">
                                                                <div class="custom-control custom-switch">
                                                                    <input type="checkbox" class="custom-control-input" id="customSwitch2">
                                                                    <label class="custom-control-label" for="customSwitch2"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="setting-list">
                                                            <div class="setting-list-name">Notifications</div>
                                                            <div class="setting-list-switch">
                                                                <div class="custom-control custom-switch">
                                                                    <input type="checkbox" class="custom-control-input" id="customSwitch3">
                                                                    <label class="custom-control-label" for="customSwitch3"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="setting-list">
                                                            <div class="setting-list-name">Block</div>
                                                            <div class="setting-list-switch">
                                                                <div class="custom-control custom-switch">
                                                                    <input type="checkbox" class="custom-control-input" id="customSwitch4">
                                                                    <label class="custom-control-label" for="customSwitch4"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
            
                                
                                </div>
                            </div>
                        </div>
                        <!-- information panel end -->
                    </div>
                    <!-- conversations end -->
                </div>
            </div>
            <!-- main content end -->
        </div>

        <!-- VIDEO CALL START-->
        <!-- OUTGOING VOICE CALL -->
    </div>
    <!-- main wrapper end -->

    <!-- Javascripts Files -->
    <script src="dist/js/popper.min.js" ></script>
        <script src="assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>
    <script src=""></script>
    <script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="assets/vendors/material-floating-button/dist/mfb.min.js"></script>
    <script src="dist/js/main.min.js"></script>

    
    
<script type="text/javascript">
	cuser_id=null;
	cshop_id=null;

	function formatDateTime(date) { 　　　　　
	var y = date.getFullYear(); 
	var m = date.getMonth() + 1;  
	m = m < 10 ? ('0' + m) : m;  
	var d = date.getDate();  
	d = d < 10 ? ('0' + d) : d;  
	 var h = date.getHours();  
	 h=h < 10 ? ('0' + h) : h;  
	var minute = date.getMinutes();  
	minute = minute < 10 ? ('0' + minute) : minute;  
	var second=date.getSeconds();  
	 second=second < 10 ? ('0' + second) : second;
	 return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
	}
	 function getchats(s_id,u_id){
		 cshop_id=s_id;
		 cuser_id=u_id;
	     	$.ajax({
	     	    method: 'GET',
	     	    url: '/ProfessionalDesign/Onechat', <!-- 添加controller返回json格式 -->
	     	  	data: "shopid=" + s_id + "&userid=" + u_id,
	     	   	dataType:"json", 
	     	    success: function (res) {
	     	      //if (res.status !== 200) {console.log(res) ;return alert('获取聊天列表失败！')}
	     	      var rows = []
	     	     console.log(res)
	     	      $.each(res, function (i, item) {
	     	    	  var mydate=new Date(item.date)
	     	    	  if(item.state==1){
	     	    	  var str = " <li class=\"message sent\"><div class=\"message__text\">"+item.content
	     	    	  +"<div class=\"metadata\"><span class=\"time\">"
	     	    	  +formatDateTime(mydate)+"</span></div></div><div class=\"message__options\"><i class=\" mdi mdi-dots-horizontal\" >"
	     	    	  +"</i></div></li>"
	     	    	  }
	     	    	  else{
	     	    	  var str="<li class=\"message received\"><div class=\"message__text\">"+item.content
	     	    	  +"<div class=\"metadata\"><span class=\"time\">"+formatDateTime(mydate)
	     	    	  +"</span></div></div><div class=\"message__options\"><i class=\" mdi mdi-dots-horizontal\" ></i></div></li>"
	     	    	  }
	     	    	  rows.push(str)
	     	      })
	     	      $('#chat-lists').empty().append(rows.join(''))
	     	    }
	     	  })
	     }
	 
	 </script>
    <script>
 $(document).ready(function () {
        $("#send").on("click",function(){
        	var idx=1;
        	var cdate = new Date()<!--获得日期数据-->
        	var textchat=$("#textchat").val();
        	var smassege ={
        			messsge_id:idx,
        			user_id:cuser_id,
        			shop_id:cshop_id,
        			content:textchat,
        			state:1,
        			date:cdate,
                };
                            //定义ajax()
                           $.ajax({
                    type: "POST",
                    url:"/ProfessionalDesign/SendMessage",
                    data: JSON.stringify(smassege),
                    contentType:"application/json",
                    success: function (res) {
                      getchats(cshop_id,cuser_id);
              	      //$('#formAddCmt')[0].reset();
                    }
                }) 
            });  
 });
    </script>
</body>
</html>
